<template>
	<a-layout>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="content">
				班级管理
			</block>
		</cu-custom>
		<!-- 老师任课班级 -->
		<view class='grid'>
			<view class="grid-title">
				任课班级
			</view>
			<a-scroll :no-data-style="{backgroundColor:`transparent`,height:`auto`}" :request="getMyClass" ref="getMyClass"
			 :parm="{pageSize:3000}">
				<template #item="{row:x,index}">
					<a-grid :list="x" :cell="3" :closeHeight="true">
						<template #default="{row}">
							<view class="navigator" v-if="row.name && row.mainTeacher">
								<text>{{row.name}}</text>
								<text>{{row.mainTeacher}}</text>
							</view>
						</template>
					</a-grid>
				</template>
			</a-scroll>
		</view>
		<a-scroll :no-data-style="{backgroundColor:`transparent`,height:`30vh`}" :request="getGrade" ref="getGrade" :parm="{pageSize:3000}">
			<template #item="{row:x,index}">
				<view class='grid'>
					<view class="grid-title">
						{{x.name}}
					</view>
					<a-scroll :no-data-style="{backgroundColor:`transparent`,height:`auto`}" :request="getClass" :parm="{index:index,pageSize:3000,id:x.id}">
						<template #item="{row:x,index}">
							<a-grid :list="x" :cell="3" :closeHeight="true">
								<template #default="{row}">
									<view class="navigator" v-if="row.name && row.mainTeacher">
										<text>{{row.name}}</text>
										<text>{{row.mainTeacher}}</text>
									</view>
								</template>
							</a-grid>
						</template>
					</a-scroll>
				</view>
			</template>
		</a-scroll>
	</a-layout>
</template>

<script>
	export default {
		//上拉触底
		onReachBottom() {
			this.$refs.getGrade.lower();
			this.$refs.getMyClass.lower();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.$refs.getGrade.get(true).then(res => {
				uni.stopPullDownRefresh();
			});
			this.$refs.getMyClass.get(true).then(res => {
				uni.stopPullDownRefresh();
			});
		},
		data() {
			return {
				gradeList: [],
				selectClassOfLoginTeacherUrl: "/api/v1/course/selectClassOfLoginTeacher",
				findGradeTreeListUrl: "/api/v1/grade/findGradeTreeList"
			};
		},
		methods: {
			async getMyClass(parm = {}) {
				return {
					total: 1,
					data: this.$http.get(this.selectClassOfLoginTeacherUrl, {
						...parm,
						// role:this.tabsParm.id,
						campusId: 1
					}).then(result => {
						return {
							data: result
						}
					})
				}
			},
			//获取年级
			async getGrade(parm = {}) {
				return this.$http.post(this.findGradeTreeListUrl, {
					...parm,
					// role:this.tabsParm.id,
					campusId: 1
				}).then(result => {
					this.gradeList = result.map(x => {
						return {
							...x,
						}
					})
					return {
						data: this.gradeList
					}
				});
			},
			async getClass(parm = {}) {
				let index = parm.index
				console.log('ssss', this.gradeList[index].children)
				return {
					total: 1,
					data: this.gradeList[index].children
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #ebebeb;
	}

	.grid {
		margin: 10px;
		border-radius: 6px;
		box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .2);
		background-color: #fff;
		overflow: hidden;

		&-title {
			position: relative;
			font-size: 16px;
			padding: 10px 25px;

			&::after {
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				border-bottom: 1px solid rgba(0, 0, 0, .3);
				transform: scaleY(.2);
			}
		}

		.navigator {
			font-size: 18px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-radius: 6px;
			border: 1px solid #007AFF;
			background-color: rgba(112, 179, 253, .8);
			flex: 1;
			margin: 5px;
			padding: 10px 5px;
		}
	}
</style>
